<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title>個人頁面</title>

<link rel="stylesheet"
	href="../css/sunny/fontsize1.1/jquery-ui-1.10.4.custom.css">
	
<script src="../js/jquery-1.10.2.js"></script>
<script src="../js/jquery-ui-1.10.4.custom.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/messages_zh_TW.js"></script>
<script src="../js/additional-methods.js"></script>
<script src="../js/jquery.elastic.source.js"></script>

<style>
input.text,input.file,textarea {
	margin-bottom: 12px;
	width: 235px;
	padding: .4em;
	font-size: 14px;
	font-family: '微軟正黑體';
}

button.ui-datepicker-current {
	display: none;
}

p{
	border-style: solid;
	border-color: grey;
	border-width: thin;
	padding:10px;
	margin:-1px;
	border-radius: 15px;
}
</style>

<script>
	$(function() {
		$("#radio").buttonset();
		$(document).tooltip();
		$(".buttonClass, button").button();
		$( ".elastic" ).elastic();
		$("#personalform").validate({
			success : function(label) {
				label.addClass("success").html("<img src='../images/check.png'>");
			},
			rules : {
				selfintro : {
					maxlength : 120
				},
				uploadphoto : {
					accept : "image/*"
				},
				name : {
					required : true,
					rangelength : [ 1, 8 ]
				},
				cattype : {
					maxlength : 10
				}
			}
		});
		$("#summitid").click(function() {
			parent.parent.$().message("個人資料已修改");
		});
		
		$( "#slider-year" ).slider({

		      min: new Date().getFullYear()-30,
		      max: new Date().getFullYear(),
		      value: new Date().getFullYear()-2,
		      slide: function( event, ui ) {
		        $( "#amount" ).val( ui.value );
		      }
		    });
		$( "#amount" ).val( $( "#slider-year" ).slider( "value" ) );
		    
	});
</script>

</head>

<body style="overflow-x:hidden;">

	<form id="personalform" action="#" method="get"
		style="position:relative; left: 150px; line-height: 12px; font-size: 16px; font-family: '微軟正黑體'; padding-right: 300px; ">
				<p>
			<label for="name">貓名：</label><input id="name" type="text" name="name"
				placeholder="長度限制 1 至 8"
				class="text ui-widget-content ui-corner-all">
		</p>
		<div style="color: grey; height:30px; position:relative; top:8px;">（以下欄位可空白）</div>
		<p>
			<label for="email">品種：</label><input name="cattype" type="text"
				id="cattype" size="30" placeholder="若不知道可以輸入「米克思」"
				class="text ui-widget-content ui-corner-all">
		</p>
		
		
		<p style="border-bottom:none;">
			性別： <span id="radio"> <input id="male" type="radio"
				name="gender" value="male"><label for="male">公</label> <input
				id="female" type="radio" name="gender" value="female"><label
				for="female">母</label>
			</span>
		</p>
		<!-- input type="file" 加上 multiple attribute使其可以選擇多檔案 -->
		<p style="border-bottom:none;">
			<label for="uploadphoto">上傳照片：</label><input type="file"
				name="uploadphoto" id="uploadphoto"
				style="width: 300px; font-size: 18px; font-family: '微軟正黑體';">
		</p>
		<p style="border-bottom:none;">
			<label for="selfintro">貓咪介紹：</label>
			<textarea name="selfintro" id="selfintro" cols="80" rows="3" style="resize: none; max-height:62px;"
				placeholder="幫你的貓來段生動有趣的自我介紹吧！長度限制120字"
				class="elastic text ui-widget-content ui-corner-all"></textarea>
		</p>
		<p style="border-bottom:none;"> 出生年：
		<input type="text" id="amount" style="border:0; font-size: 16px; font-family: '微軟正黑體'; background:transparent;">
		<span style="border:0; font-size: 16px; font-family: '微軟正黑體';">請滑動桿子選擇年份</span>
		</p>
		<div id="slider-year"></div>
		
		<p>
			<input id="summitid" type="submit" value="送出 " class="buttonClass">
			<input type="reset" value="重填" class="buttonClass">
		</p>
	</form>
	
</body>

</html>